<template>
  <div class="content">
    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner" v-for="(item,index) in goodsList" :key="index">
            <mt-switch v-model="value"></mt-switch>
						<img :src="item.pic" alt="">
            <div class="info">
              <h3>{{item.title}}</h3>
              <div class="right">
                <span class="price">￥{{item.price}}</span>
                <numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                <a href="#">删除</a>
              </div>
            </div>
					</div>
				</div>
			</div>

      <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
            <mt-button type="danger" size="large">结算</mt-button>
					</div>
				</div>
			</div>
  </div>
</template>

<script>
import $ from '../../lib/mui/js/jquery-1.12.1.min';
import numbox from '../subcomponents/shopcar_numbox.vue';
export default {
  data() {
    return {
      value:true,
      counter:1,
      goodsList:[],
    }
  },
  created(){
    var idArr = [];
      this.$store.state.car.forEach(item => {
        idArr.push(item.id)
      });
      var countArr = [];
      this.$store.state.car.forEach(item => {
        countArr.push(item.count)
      });
      // console.log(idArr)
    for (var i = 0; i < this.$store.state.car.length; i++) {
           this.getGoodlList(idArr[i], countArr[i]);
        }
  },
  methods: {
    sub(){
      this.counter--;
    },
    add(){
      this.counter++;
    },
    getGoodlList(goods_id, goods_count){
       this.axios({
                url:"http://10.31.162.198/1810-3/Vue/vue-cms/src/lib/PHP/goods.php"
            }).then(res=>{
                $.each(res.data, (index, value)=> {
                if (goods_id == value.id) {
                  this.goodsList.push(value);
                  // console.log(this.goodsList)
                }
            });
          })
    }
  },
  components:{
    numbox
  }
}
</script>

<style lang="scss" scoped>
.content{
  background-color: #eee;
  overflow: hidden;
  .mui-card-content-inner{
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
   img{
      height: 50px;
      width: 50px;
    }
  .info{
    .right{
       display: flex;
       align-items: center;
       justify-content: space-between;
       .mui-numbox{
         margin: 0 5px;
       }
    }
    h3{
      font-size: 14px;
    }
    .price{
      color: #f00;
      font-weight: bold;
    }
  }
}
</style>
